<template>
	<base-page title="分销设置" backgroundColor="white">
		<view class="px-16 py-12">
			<view class="flex">
				<image class="radius-8 mr-12 flex-shrink" style="width:88px;height:88px;" :src="activeImg.split(',')[0]"></image>
				<view class="flex-col flex-1">
					<text class="mb-6">{{activeTitle}}</text>
					<text class="fs-16 color-primary text-bold">¥{{numberFormat(activePrice)}}</text>
				</view>
			</view>
			<template v-if="!isZeroState">
				<view class="flex-col mt-20">
					<view>
						<text class="text-bold">设置经纪人权益</text>
					</view>
					<!-- <view class="radius-4 mt-2 px-4 fs-12 text-color-hint leading-20 flex item-center" style="background-color:#FFE9B7;">
						<text>佣金奖励与其他权益可同时设置，由经纪人选择</text>
					</view> -->
				</view>
				<!-- <view class="mt-20">
					<view>
						<text class="text-bold">固定佣金</text>
					</view>
					<view class="radius-4 mt-4 fs-12 text-color-hint">
						<text>经纪人推广可获得佣金奖励</text>
					</view>
				</view> -->
				<!-- <view class="mt-12 flex justify-between item-center">
					<view class="flex item-center">
						<image v-if="defaultCommissionType===1" class="w-16 h-16 mr-4" src="@/static/svg/radio-selected.svg" @click="onClick('commissionAmt', false)"></image>
						<image v-else class="w-16 h-16 mr-4" src="@/static/svg/radio-default.svg" @click="onClick('commissionAmt', true)"></image>
						<text class="" style="color:#979797;">固定金额</text>
					</view>
					<view class="flex item-center">
						<text class="fs-13 text-bold">佣金金额</text>
						<view class="ml-8 radius-8 bg-white h-28 flex item-center fs-12" style="width:114px;border:1px solid rgba(51, 51, 51, 0.30);">
							<input
								:value="commissionAmt"
								:maxlength="8"
								@change="inputChange('commissionAmt', $event)"
								class="flex-1 px-8"
								placeholder="分销佣金"
								placeholder-style="color:#A5A7A9;"
							/>
							<view class="w-40 h-full flex center" style="background-color:#E2E2E2;border-left:1px solid rgba(51, 51, 51, 0.30);">
								<text class="">元</text>
							</view>
						</view>
					</view>
				</view> -->
				<view class="mt-12 flex justify-between item-center">
					<!-- <view class="flex item-center">
						<image v-if="defaultCommissionType===2" class="w-16 h-16 mr-4" src="@/static/svg/radio-selected.svg" @click="onClick('commissionRate', false)"></image>
						<image v-else class="w-16 h-16 mr-4" src="@/static/svg/radio-default.svg" @click="onClick('commissionRate', true)"></image>
						<text class="" style="color:#979797;">按比例设置</text>
					</view> -->
					<view class="flex item-center">
						<text class="fs-13 text-bold" style="width: 5em;">奖励方式：</text>
						<view class="flex item-center">
							<view class="flex item-center" @click="onSwitchClick(1)">
								<image v-if="rewardType === 1" class="ml-6 w-14 h-14 mr-4"
									src="@/static/svg/radio-selected.svg"></image>
								<image v-else class="ml-6 w-14 h-14 mr-4" src="@/static/svg/radio-default.svg"></image>
								佣金
							</view>
							<view v-if="settingData.pointsMallState === 1" class="flex item-center" @click="onSwitchClick(3)">
								<image v-if="rewardType === 3" class="ml-6 w-14 h-14 mr-4"
									src="@/static/svg/radio-selected.svg"></image>
								<image v-else class="ml-6 w-14 h-14 mr-4" src="@/static/svg/radio-default.svg"></image>
								积分
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="mt-8 ml-21">
					<text class="text-color-hint">订单售价*佣金比例=佣金金额</text>
				</view> -->
				<view v-if="rewardType === 1" class="mt-12" style="margin-left: 5em;">
					<view class="fs-12 flex item-center">
						<text class="fs-13 text-bold mr-8">佣金比例</text>
						<view class="flex radius-8 bg-white h-28 item-center" style="width:114px;border:1px solid rgba(51, 51, 51, 0.30);">
							<input
								:value="commissionRate"
								:maxlength="4"
								@change="inputChange('commissionRate', $event)"
								class="flex-1 px-8"
								placeholder="百分比"
								placeholder-style="color:#A5A7A9;"
							/>
							<view class="w-40 h-full flex center" style="background-color:#E2E2E2;border-left:1px solid rgba(51, 51, 51, 0.30); overflow: hidden;">
								<text class="">%</text>
							</view>
						</view>
					</view>
					<view class="mt-6 fs-12">佣金{{ numberFormat(activePrice * commissionRate / 100) }}元</view>
				</view>
				<view v-if="rewardType === 3" class="mt-12" style="margin-left: 5em;">
					<view class="fs-12 flex item-center">
						<text class="fs-13 text-bold mr-8">奖励</text>
						<view class="flex radius-8 bg-white h-28 item-center" style="width:114px;border:1px solid rgba(51, 51, 51, 0.30);">
							<input
								:value="rewardPoints"
								@change="inputChange('rewardPoints', $event)"
								class="flex-1 px-8"
								placeholder-style="color:#A5A7A9;"
							/>
							<view class="w-40 h-full flex center" style="background-color:#E2E2E2;border-left:1px solid rgba(51, 51, 51, 0.30);">
								<text class="">积分</text>
							</view>
						</view>
					</view>
					<view class="mt-6 fs-12">1元佣金={{settingData.distribution}}积分，价值约{{ rewardPoints ? (rewardPoints/settingData.distribution).toFixed(2) : '' }}元</view>
				</view>
			</template>
			
			
			<!-- <view class="mt-20">
				<view class="flex justify-between item-center h-20">
					<text class="text-bold">奖励二：其他权益（非必填)</text>
				</view>
				<view class="mt-4 h-21 flex item-center fs-12 text-color-hint">
					<text>经纪人推广无佣金，可线下兑换权益说明内的奖励内容。</text>
				</view>
				<view class="mt-8 uni-bg-color radius-8 pl-12 pt-12 pr-8 pb-21">
					<textarea v-model="otherEquity" :maxlength="300" class="text-color-regular" style="min-height:130px;" :auto-height="true" placeholder="请输入活动标题（最多300字）" placeholder-style="color:#A5A7A9;"></textarea>
					<view class="flex justify-end">
						<text class="text-color-hint fs-10">{{otherEquity && otherEquity.length || 0}}/300</text>
					</view>
				</view>
			</view> -->
			<view class="mt-20">
				<view class="flex justify-between item-center h-20">
					<text class="text-bold">选择经纪人</text>
					<view class="flex item-center fs-10" @click="toChooseAgent">
						<text class="text-color-hint">{{agentNumState === 1 ? '所有经纪人' : '部分经纪人'}}</text>
						<image class="w-16 h-17 ml-4" src="@/static/svg/icon-arrow-right.svg"></image>
					</view>
				</view>
			</view>
		</view>
		<template #footer>
			<view class="footer m-12 flex">
				<button class="cancel-btn" @click="goBack">取消</button>
				<button class="confirm-btn" @click="submit">保存</button>
			</view>
		</template>
	</base-page>
</template>

<script setup name="DistributionSetting">
	/**
	 * 分销设置
	 */
	import { numberFormat } from '@/utils/index.js'
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, unref, watch, getCurrentInstance } from 'vue'
	import { getHomePageApi } from '@/pagesG/api/subsidy.js'
	import {useUserStore} from '@/stores/modules/user.js'
	const userStore = useUserStore()
	const instance = getCurrentInstance()
	
	const goBack = () => uni.navigateBack()
	
	const activeTitle = ref('')
	const activeImg = ref('')
	const activePrice = ref(0)
	const isZeroState = ref(false)

	// 默认佣金类型：0-无，1-佣金，2-佣金比例
	const defaultCommissionType = ref(2)
	// 分销佣金金额
	const commissionAmt = ref(null)
	// 分销佣金比例
	const commissionRate = ref(null)
	// 奖励方式
	const rewardType = ref(1)
	// 奖励积分
	const rewardPoints = ref(null)
	// 其他权益
	const otherEquity = ref(null)
	// 是否是所有经纪人可推广：1-是，2-否
	const agentNumState = ref(1)
	const selectAgentList = ref([])
	const settingData = ref({})
	
	const onSwitchClick = (val) => {
		rewardType.value = val
	}
	
	const onClick = (key, check) => {
		if (key === 'commissionAmt') {
			defaultCommissionType.value = check ? 1 : 0
		} else if (key === 'commissionRate') {
			defaultCommissionType.value = check ? 2 : 0
		}
	}
	
	// 默认不选中，输入框输入自动选中当前项，也可以选中后再填
	const inputChange = (type, { detail }) => {
		if (type === 'commissionAmt') {
			commissionAmt.value = detail.value
			defaultCommissionType.value = 1
		} else if (type === 'commissionRate') {
			commissionRate.value = detail.value
			defaultCommissionType.value = 2
		} else if (type === 'rewardPoints') {
			rewardPoints.value = numberFormat(detail.value)
		}
	}
	
	const toChooseAgent = () => {
		uni.navigateTo({
			url: '/pagesG/publish/choose-agent',
			success: (res) => {
				res.eventChannel.emit('acceptDataFromOpenerPage', {
					agentNumState: unref(agentNumState),
					selectAgentList: [...selectAgentList.value],
				})
			},
			events: {
				onAgentChange: (data) => {
					console.log('经纪人选择', data)
					agentNumState.value = data.agentNumState
					selectAgentList.value = data.selectAgentList
				}
			}
		})
	}
	
	const submit = () => {
		console.log('分佣设置', defaultCommissionType.value, commissionAmt.value, commissionRate.value, agentNumState.value, selectAgentList.value)
		
		if (!commissionRate.value && !rewardPoints.value) {
			showToast('请设置奖励')
			return
		}
		// if (defaultCommissionType.value === 1) {
		// 	if (commissionAmt.value === null) {
		// 		showToast('请设置佣金金额')
		// 		return
		// 	} else if (+commissionAmt.value <= 0) {
		// 		showToast('佣金金额不能小于0')
		// 		return
		// 	}
		// } else if (defaultCommissionType.value === 2) {
		// 	if (commissionRate.value === null) {
		// 		showToast('请设置佣金比例')
		// 		return
		// 	} else if (+commissionRate.value <= 0) {
		// 		showToast('佣金比例不能小于0')
		// 		return
		// 	}
		// }
		const eventChannel = instance.ctx.getOpenerEventChannel()
		eventChannel.emit('onCommissionChange', {
			defaultCommissionType: unref(defaultCommissionType),
			commissionAmt: unref(commissionAmt),
			commissionRate: unref(commissionRate),
			otherEquity: unref(otherEquity),
			agentNumState: unref(agentNumState),
			rewardType: unref(rewardType),
			rewardPoints: unref(rewardPoints),
			selectAgentList: [...selectAgentList.value],
		})
		uni.navigateBack()
	}
	
	const showToast = (title) => {
		uni.showToast({
			title,
			icon: 'none'
		})
	}
	
	const getHomePage = (id) => {
		getHomePageApi({id}).then(res => {
			settingData.value = res
		})
	}
	
	onLoad(() => {
		getHomePage(userStore.userInfo.businessInfo.id)
		const eventChannel = instance.ctx.getOpenerEventChannel()
		eventChannel.on('acceptDataFromOpenerPage', (data) => {
			console.log('传值', data)
			activeTitle.value = data.activeTitle || ''
			activeImg.value = data.activeImg || ''
			activePrice.value = data.activePrice || 0
			defaultCommissionType.value = data.defaultCommissionType
			commissionAmt.value = data.commissionAmt
			commissionRate.value = data.commissionRate
			rewardType.value = data.rewardType || 1
			rewardPoints.value = data.rewardPoints || 0
			otherEquity.value = data.otherEquity
			agentNumState.value = data.agentNumState
			selectAgentList.value = data.selectAgentList
			isZeroState.value = data.isZeroState
		})
	})
</script>

<style lang="scss" scoped>
	.footer {
	
		.cancel-btn, .confirm-btn {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 8px;
			height: 46px;
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: 22px;
		}
		.cancel-btn {
			background-color: #FFF;
			border: 1px solid rgba(51, 51, 51, 0.60);
			color: rgba(51, 51, 51, 0.60);
			margin-right: 12px;
		}
		.confirm-btn {
			border-radius: 8px;
			background: #FA4543;
			color: #FFF;
		}
	}
</style>
